<template>
  <div id="mask" >
    <img v-show="!showUp" id="pan" :src="pan" alt="转盘不见啦" >
    <div id="grid">
      <div v-for="i in imageNum" v-show="showUp" :key="i" :id="'p'+(i-1)" class="card-container">
        <img :data-index="i-1" alt="卡背不见啦" src="cardBack.gif" @click.once="openCard">
      </div>
    </div>
    <button v-show="showUp" @click="endOpen">收下图片</button>
  </div>
</template>

<script>
import pan from '../assets/lottery.png'
import {mapState} from "vuex";
import {Loading} from 'element-ui';

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "AMask",
  data() {
    return {
      pan: pan,
      count: -1,
      showUp: false,
      loadingList: [],
    }
  },
  computed: {
    ...mapState(['imgList', 'imageNum', 'isSwitching', 'imgSizes'])
  },
  methods: {
    openCard(e) {
      this.count--;
      if (this.count === -2) this.count = this.imageNum-2;

      const target = e.target;
      target.className += " flip";
      const index = target.dataset.index;

      this.loadingList[index] = Loading.service({target: '#p'+index, spinner: 'el-icon-loading',
        text: '图片拼命加载中', background: 'rgba(0,0,0,0.7)'
      });
      target.addEventListener('load', (e)=>{
        this.loadingList[e.target.dataset.index].close();
      })

      setTimeout(()=> {
        const cardWidth = target.width;
        const cardHeight = target.height;
        const ratio = cardWidth / cardHeight;

        target.src = this.imgList[index];
        if (this.imgSizes[index][0] / this.imgSizes[index][1] > ratio) {
          target.width = cardWidth;
        } else {
          target.height = cardHeight;
        }
      }, 500);
    },
    endOpen() {
      this.$store.state.isSwitching = false;
      this.$store.dispatch('autoChange');
    },
  },
  mounted() {
    setTimeout(()=>this.showUp = true, 2e3)
  }
}
</script>

<style scoped>
  #mask {
    top: 0; left: 0; right: 0; bottom: 0;
    position: absolute;
    background-color: rgba(0,0,0,0.75);
    z-index: 1;
  }
  .card-container {
    width: 233px;
    height: 330px;
  }
  #grid {
    display: grid;
    gap: 50px;
    align-items: center;
    justify-items: center;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 30px;
    margin-bottom: 30px;
    /*transform: rotateY(180deg);*/
  }
  #pan {
    animation: Spanning 2s ease-in-out;
    position: absolute;
    top: 50%;
    left: 50%;
  }
  .flip {
    animation: Flipping 1s linear;
    /*animation-fill-mode: forwards;*/
  }
  @keyframes Spanning {
    from {
      transform: translate(-50%, -50%) scale(3);
    }
    to {
      transform: translate(-50%, -50%) scale(3) rotate(1800deg);
    }
  }
  @keyframes Flipping {
    50% {
      transform: rotateY(90deg);
    }
    100% {
      transform: rotateY(0);
    }
  }
  button {
    position: fixed;
    cursor: pointer;
    padding: 10px;
    width: 200px;
    border: 4px ridge rgba(255, 128, 0, 1);
    border-radius: 50%;
    font: xx-large 华文彩云;
    text-shadow: 1px 1px 1px darkred, -1px 1px 1px yellow;
    color: yellow;
    background-color: darkred;
    left:50%;
    transform: translateX(-50%);
    bottom: 50px;
  }
</style>